Repository navigation
chore: Adds internal style api v2 to item card - #5246
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
ItemCard still applies the legacy border radius inline, overriding the v2 root radius and causing mismatched corners between the outline, background, and shadow.
1 open issue
What changed in this PR
Adds internal Style API v2 support to ItemCard, exposing root, header, and footer styling slots while preserving default rendering and legacy styling fallbacks.
Changes:
- Adds slot class names and styling tokens for borders and corner radii.
- Preserves legacy footer-divider behavior and adds unit coverage.
- Adds a demo page showing combined and individual slot styling.
| File | Description |
|---|---|
src/item-card/styles.scss |
Defines slot styling, token fallbacks, and section corner radii. |
src/item-card/style.tsx |
Preserves legacy footer-divider defaults. |
src/item-card/internal.tsx |
Applies internal styling classes to each slot. |
src/item-card/__tests__/styles.test.tsx |
Tests partially specified footer dividers. |
src/item-card/__tests__/style-api.test.tsx |
Tests slot classes, conditional rendering, and DOM prop filtering. |
pages/item-card/style-api-v2.scss |
Defines demo styles for all three slots. |
pages/item-card/style-api-v2.page.tsx |
Demonstrates slot styling across card variants. |
Review effort: Balanced
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5246 +/- ##
==========================================
- Coverage 97.82% 97.82% -0.01%
==========================================
Files 1006 1006
Lines 32621 32577 -44
Branches 12117 12103 -14
==========================================
- Hits 31913 31868 -45
- Misses 666 667 +1
Partials 42 42 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
55cfe71 to
ca4f440
Compare
ca4f440 to
11f1d20
Compare
There was a problem hiding this comment.
🟡 Changes recommended
Header and footer corner properties incorrectly receive the full border-radius shorthand, causing malformed or square corners that can let section backgrounds extend outside the rounded card.
2 open issues
1 resolved since last review
Review effort: Balanced
11f1d20 to
d62d8a5
Compare
There was a problem hiding this comment.
🟡 Changes recommended
Header and footer backgrounds can extend beyond the card’s rounded boundary with percentage or large fixed radii, requiring a styling fix and browser regression coverage.
2 open issues
1 resolved since last review
Review effort: Balanced
d62d8a5 to
7d504bd
Compare
Description
Adds the internal Style API v2 to Item card:
root,header(rendered whenheader,description,iconoractionsis set) andfooter. The default rendering of Item card and Cards does not change: every existing declaration keeps its value as the fallback, and the new header and footer corner radii and zero-width transparent divider borders paint nothing by default. v1styleand v2styleClassNamesare not meant to be combined on one instance; v1 behaviour is unchanged from main, with one fix: a v1 footer divider on a card that has only a footer now follows the card's rounded top corners instead of running straight through them.The style-docs snapshot and the VR registration of the dev page follow in one PR for all components.
Tracker section: P3d34KdbCd6o.
Related links, issue #, if available: n/a
How has this been tested?
Unit tests for every slot, dev page
item-card/style-api-v2, build and lint green.Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.